<script setup lang="ts">
import dayjs from "dayjs";
import { Request } from "@/services";
import CustomWaterfallsFlow from "@/sources-subpackage/components/CustomWaterfallsFlow/index.vue?async";
import { useGlobalStore } from "@/stores/modules/global";
import { useFormatPriceCustom, useSplitPrice } from "@/utils";

const globalStore = useGlobalStore();

const pagingRef = ref<ZPagingRef | null>(null);

const dataList = ref<Record<string, any>[]>([]);

const tabBarHeight = computed(() => globalStore.initialState.tabBarHeight);

const queryList = (pageNo: number, pageSize: number) => {
  Request.get("/api/front/index/seckill/info", { pageNo, pageSize }).then((resp) => {
    console.log(resp);
  });
  const a = Array.from({ length: pageSize }, () => ({
    id: Math.floor(Math.random() * 1000), // 随机生成ID
    name: `Item ${Math.floor(Math.random() * 1000)}`, // 随机生成名称
    tags: Math.floor(Math.random() * 1000),
    productName: "asdjaksjdaskl",
    description: "暗示大家奥斯卡奖打瞌睡",
    price: 15151.54,
    listPrice: 454454.45,
    url: "https://uni-wheat-shop-weapp.oss-cn-shanghai.aliyuncs.com/images/home/demo.png"
  }));
  setTimeout(() => {
    pagingRef.value?.complete(a);
  }, 500);
};

const handleClick = () => {
  console.log(dayjs().format("YYYY-MM-DD HH:mm:ss"));
};
</script>

<template>
  <z-paging ref="pagingRef" v-model="dataList" :paging-style="{ paddingBottom: `${tabBarHeight}px` }" @query="queryList">
    <template #top>
      <wd-navbar fixed placeholder title="首页" safe-area-inset-top />
    </template>
    <template #default>
      <CustomWaterfallsFlow :data="dataList" :column-count="2" @click-wrapper="handleClick">
        <template #item="{ row }">
          <view class="bg-white shadow-sm p-[10rpx_0_18rpx_0] rounded-[16rpx]">
            <view class="px-[28rpx] mt-[16rpx]">
              <image :src="row.url" mode="widthFix" class="w-full h-[340rpx]" />
              <text class="text-[#333333] text-[26rpx] line-clamp-2 leading-normal">
                <text v-if="row.tags" class="min-w-[fit-content] bg-[#ffede4] mr-[6rpx] px-[6rpx] py-[6rpx] rounded-[6rpx] text-[18rpx] text-[var(--wot-color-theme)]">{{ row.tags }}</text>
                {{ row.productName }}
              </text>
              <view class="w-full text-[#999999] mt-[10rpx] text-[24rpx] line-clamp-1">{{ row.description }}</view>
              <view class="flex justify-between items-center mt-[18rpx]">
                <view class="flex items-end text-[var(--wot-color-theme)] font-medium">
                  <text class="text-[24rpx] mr-[4rpx] mb-[2rpx]">¥</text>
                  <text class="text-[30rpx] leading-[30rpx]">{{ useSplitPrice(useFormatPriceCustom(row.price)).integer }}</text>
                  <text class="text-[24rpx]">{{ useSplitPrice(useFormatPriceCustom(row.price)).fractional }}</text>
                </view>
                <view v-if="row.listPrice" class="text-[#AAAAAA] text-[22rpx] font-normal line-through mt-[4rpx]">¥{{ row.listPrice }}</view>
              </view>
            </view>
          </view>
        </template>
      </CustomWaterfallsFlow>
    </template>
  </z-paging>
</template>
